<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <template v-for="item in list">
            <el-breadcrumb-item>{{ item.meta.title }}</el-breadcrumb-item>
        </template>
    </el-breadcrumb>
    <el-divider />
</template>

<script lang="ts" setup>
import { onMounted,watch,ref } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue';
import {useRoute} from 'vue-router'
const route = useRoute()

const list=ref([])
onMounted(()=>{

})
// watch可以监听某一个变量或者某一个值的变化
watch(()=>route.matched,(newValue:any,_oldValue:any)=>{
    list.value=[]
    // console.log(newValue);
    if(newValue.length>1){
        list.value=newValue

    }
    
})
</script>